import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';

// 引入高阶组件 memo  本质就是一个函数,用来对另一个组件进行加工处理
// 语法: memo(组件) 会将被包裹的组件变成纯组件,因为纯组件它的函数组件的执行
// 只受当前组件自身的state 和 接收的props 的影响, 否则不执行
import { memo } from 'react'


const Child = () => {
    const [keyword, setKeyword] = useState('');
    const [schoolArr, setSchoolArr] = useState([]);
    useEffect(() => {
        axios.get('https://api.i-lynn.cn/college').then(res => {
            // 
            setSchoolArr(res.data.data.list1)
        })
    }, [])
    const searchFn = (e) => {
        setKeyword(e.target.value)
    }

    const newFilterArr = schoolArr.filter((item) => {
        console.log('执行了');
        return item.school_name.indexOf(keyword) != -1
    })

    return (
        <div>
            {/* 筛选的输入框 */}
            <input type='text' value={keyword} onChange={searchFn} />
            {/* 数据列表 */}
            <ul>
                {
                    newFilterArr.map((item) => {
                        return <li key={item.id}>{item.school_name}</li>
                    })
                }
            </ul>
        </div>
    );
}

export default memo(Child);
